<template>
  <el-dialog
    title="创建资源"
    :visible="dialogVisible"
    append-to-body
    close-on-press-escape
    custom-class="custom-dialog"
    @close="closeDialog"
  >
    <div class="p-t-22 flex content-space-around">
      <router-link :to="`/spaces/${spaceId}/resources/new`" class="el-card is-hover-shadow">
        <div class="el-card__body h3 flex align-items-center">
          <svg-icon icon-name="sprite_icons_pencil-square" class="s30 m-r-10" />
          在线编辑
        </div>
      </router-link>
      <div class="el-card is-hover-shadow m-l-16 pointer" @click="selectFiles">
        <div class="el-card__body h3 flex align-items-center">
          <svg-icon icon-name="sprite_icons_upload" class="s30 m-r-10" />
          本地上传
        </div>
      </div>
      <input v-show="false" ref="fileInput" type="file" multiple @change="selectedFiles" />
    </div>
  </el-dialog>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'pre-create-dialog',
  props: {
    dialogVisible: Boolean,
  },
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    spaceId() { return this.$route.params.spaceId; },
  },
  methods: {
    ...mapActions({
      setUploads: 'setPreUploads',
    }),
    selectFiles() {
      this.$refs.fileInput.click();
    },
    // 选择了文件
    selectedFiles() {
      const files = this.$refs.fileInput.files;
      const uploads = Object.values(files).map((rawFile, i) => {
        Object.assign(rawFile, { uid: Date.now() + i });
        return {
          status: 'ready',
          name: rawFile.name,
          size: rawFile.size,
          percentage: 0,
          uid: rawFile.uid,
          raw: rawFile,
        };
      });
      this.setUploads(uploads);
      this.$router.push(`/spaces/${this.spaceId}/resources/upload-confirm`);
    },
    closeDialog() { this.$emit('update:dialogVisible', false); },
  },
};
</script>

<style></style>
